<template>
  <header style="height:74px">
    <div
      class="header-box"
      :class="headStyleMap[headStyleType]"
      v-if="Array.isArray(renderList) && renderList.length"
    >
      <nav class="header-box-inner block-center flex-center-wrap">
        <div>
          <a :href="parseFullPath('/')">
            <span
              :class="
                `web-logo ${
                  [1, 2].includes(+headStyleType) ? 'black' : 'white'
                }`
              "
            ></span>
          </a>
        </div>

        <!-- 导航菜单 -->
        <div v-if="isProfessionHome" class="profession-select-box">
          <div>
            <!-- 展示已选中专业 -->
            <div class="current-profession flex-center-wrap">
              <div class="current-title" :title="profession_name">
                {{ profession_name }}
              </div>
              <img
                alt="选中专业"
                src="//image.zlketang.com/public/news/images/new_official/profession_home/profession_select_icon.png"
                class="select-icon"
              />
            </div>
            <!-- 专业选择框 -->
            <div
              class="profession-select-wrap"
              v-if="bannerLeftProfessions.length"
            >
              <ul class="profession-select">
                <li
                  class="select-item"
                  @click="gotoProfessionPage(item)"
                  v-for="(item, index) in bannerLeftProfessions"
                  :key="index"
                >
                  <a :href="parseFullPath(item.path)" target="_blank">
                    {{ item.name }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <ul
          style="margin-left: 29px"
          class="header-navs flex-center-wrap"
          v-if="renderList.length"
        >
          <li class="nav-item" v-for="(item, index) in renderList" :key="index">
            <span v-if="item.menu_tag === 'NEW'" class="nav-item-new"></span>
            <span
              v-else-if="item.menu_tag === 'HOT'"
              class="nav-item-hot"
            ></span>
            <a
              :href="parseFullPath(item.path)"
              target="_blank"
              class="nav-item-a rel"
              :class="{ 'nav-item-a-active': currentHref === item.path }"
              @click="changeIndex(item, index)"
            >
              <span>{{ item.menu_name }}</span>
              <i
                v-if="Array.isArray(item.child) && item.child.length"
                class="nav-triangle"
              ></i>
              <object
                class="abs nav-dropdown"
                v-if="Array.isArray(item.child) && item.child.length"
              >
                <a
                  target="_blank"
                  class="nav-dropdown-item f14 text-ess-1"
                  v-for="(itemB, indexB) in item.child"
                  :key="indexB"
                  :href="parseFullPath(itemB.path)"
                  :title="itemB.menu_name"
                  @click.stop="changeIndex(itemB, index)"
                >
                  {{ itemB.menu_name }}
                </a>
              </object>
            </a>
          </li>
        </ul>
        <div class="header-right flex-wrap">
          <!-- 新搜索框 -->
          <div @click="openSearchDialog" class="rel search-box">
            <div class="search-input bs-border"></div>
            <i class="iconfont icon-sousuo1 search-icon flex-center"></i>
          </div>
          <!-- 学习记录和登录领课 -->
          <div class="flex-center-wrap">
            <template>
              <a
                v-show="isLogin"
                href="javascript:;"
                class="f14 head-study-btn"
                @click.stop="showStudy"
              >
                学习记录
              </a>
              <a
                v-show="!isLogin"
                href="javascript:;"
                class="f14 head-study-btn head-study-btn-login"
                @click.stop="showStudy"
              >
                学习记录
              </a>
            </template>
            <div class="vertical-split-line"></div>
            <a
              :href="parseFullPath('/login.html')"
              v-show="!isLogin"
              class="get-course-btn  f14"
              @click="goToLogin"
            >
              登录领课
            </a>
            <div class="flex-center" v-show="isLogin">
              <a
                target="_blank"
                :href="parseFullPath('/personal/index.html?name=1')"
                class="head-study-btn  f14"
                @click="
                  handleZla(
                    '我的课程',
                    `我的课程${profession_name ? '_' + profession_name : ''}`
                  )
                "
              >
                我的课程
              </a>
              <img
                class="my-header"
                :src="parseResourceUrl(userData.headimgurl)"
                onerror="javascript:this.src='//image.zlketang.com/public/news/images/new_official/home/error-user-header.png'"
                alt="用户头像"
                @click.stop="
                  isShowStudy = false
                  isShowCourse = !isShowCourse
                "
              />
            </div>
          </div>
        </div>
        <!-- 学习记录弹窗 -->
        <div v-if="isShowStudy" class="study-dialog">
          <div style="padding: 0 20px">
            <slide-nav
              :navList="historyType"
              :currentType.sync="activeIndex"
              @selectedNav="handleHistory"
              active-bg="#F7F7F7"
              customBoxClass="flex-center-wrap flex-justify-between"
              customItemClass="study-slide-nav"
              customItemActiveClass="study-slide-nav"
            ></slide-nav>
          </div>
          <div class="study-content" v-if="+activeIndex === 1">
            <template v-if="Array.isArray(newsHistorys) && newsHistorys.length">
              <a
                v-for="(newsItem, index) in newsHistorys"
                :key="index"
                class="study-item flex-wrap flex-center-wrap flex-justify-between"
                :href="parseFullPath(newsItem.url)"
                target="_blank"
              >
                <span class="study-left">
                  <span class="item-title text-ess-2">
                    {{ newsItem.title }}
                  </span>
                </span>
                <span class="study-right" v-if="newsItem.cover_url">
                  <img
                    :src="parseResourceUrl(newsItem.cover_url)"
                    alt="课程封面"
                  />
                </span>
              </a>
            </template>
            <div v-else class="no-history-tip">暂无资讯浏览记录</div>
          </div>
          <div class="study-content" v-if="+activeIndex === 2">
            <template v-if="Array.isArray(lastStudys) && lastStudys.length">
              <a
                v-for="(studyItem, index) in lastStudys"
                :key="index"
                class="study-item flex-wrap flex-center-wrap flex-justify-between"
                :href="parseFullPath(studyItem.url)"
                target="_blank"
              >
                <span class="study-left">
                  <span class="item-title text-ess-2">
                    {{ studyItem.course_name }}
                  </span>
                </span>
                <span class="study-right" v-if="studyItem.cover_url">
                  <img
                    :src="parseResourceUrl(studyItem.cover_url)"
                    alt="科目"
                  />
                </span>
              </a>
            </template>
            <div v-else class="no-history-tip">暂无课程浏览记录</div>
          </div>
        </div>
        <!-- 我的弹窗 -->
        <div v-if="isShowCourse" class="my-course-dialog">
          <div
            class="my-course-top flex-wrap flex-justify-between flex-center-wrap"
          >
            <div
              style="cursor: pointer"
              class="flex-wrap flex-center-wrap"
              @click="goTo('/personal/index.html', { target: '_blank' })"
            >
              <img
                class="my-header"
                :src="parseResourceUrl(userData.headimgurl)"
                alt="用户头像"
                title="用户头像"
              />
              <div>
                <div class="my-nickname text-ess-1">
                  {{ userData.nickname }}
                </div>
                <div class="my-slogin">欢迎来到之了课堂</div>
              </div>
            </div>
            <div class="logout-btn" @click="loginOut">退出</div>
          </div>

          <div
            class="my-course-bottom flex-wrap flex-justify-around flex-multi-row"
          >
            <a
              :target="
                ['投诉建议'].includes(menuItem.title) ? '_self' : '_blank'
              "
              :href="parseFullPath(menuItem.href || 'javascript:;')"
              class="fun-item flex-column-wrap flex-center-wrap"
              v-for="(menuItem, index) in myMenus"
              :key="index"
              @click="handleZla('个人学习记录', menuItem.title)"
              @mouseenter="menuItem.img = menuItem.hoverImg || menuItem.img"
              @mouseleave="menuItem.img = menuItem.defaultImg || menuItem.img"
            >
              <!-- <transition> -->
              <img class="fun-img" :src="menuItem.img" alt="学习记录" />
              <!-- </transition> -->
              <span class="fun-title">{{ menuItem.title }}</span>
            </a>
          </div>
        </div>
      </nav>
    </div>
    <!-- 新增搜索交互弹窗 -->
    <transition name="fade">
      <zl-search
        :hotSearch="hot_search"
        :historySearchs="historySearchs"
        @deleteHistorys="deleteHistorys"
        @inputSearch="inputSearch"
        @closeSearchDialog="closeSearchDialog"
        v-if="showSearchDialog"
        class="search-box-dialog"
      ></zl-search>
    </transition>
  </header>
</template>
<script>
import slideNav from '../components/slideNav.vue'
import zlSearch from '@/components/searchDialog.vue'
export default {
  name: 'pageHead',
  components: {
    'slide-nav': slideNav,
    'zl-search': zlSearch
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 当前专业
    profession_id: {
      type: [Number, String],
      default: '4'
    },
    // ,true 表示在首页应用此组件
    isProfessionHome: {
      type: Boolean,
      default: false
    },
    bannerLeftProfessions: {
      type: Array,
      default: () => []
    }
  },
  // 数据
  data() {
    return {
      currentHref: '/',
      keyword: '',
      // 是否展示专业选择下拉框
      // isShowProfessionSelect: false,
      // 是否显示学习记录
      isShowStudy: false,
      // 是否显示我的课程
      isShowCourse: false,
      // 我的菜单数据
      myMenus: [
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-course-icon.png',
          title: '我的课程',
          href: '/personal/index.html?name=1'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-test-icon.png',
          title: '我的题库',
          href: '/personal/index.html?name=2'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-shop-icon.png',
          title: '商城中心',
          href: '/courses/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/answer-icon.png',
          defaultImg:
            '//image.zlketang.com/public/news/images/new_official/home/answer-icon.png',
          title: '答疑中心',
          href: '/dayi/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/test-guide-icon.png',
          title: '考试指南',
          href: '/cjkj/guide/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/suggestion-icon.png',
          title: '投诉建议'
        }
      ],
      // 设置顶部导航栏样式类型1：默认;2:自定义；
      headStyleType: 1,
      // 定义多套样式, 改变容器的class；
      // 去掉自定义样式配置，统一走默认样式
      headStyleMap: {
        1: 'default-class',
        2: 'default-class'
      },
      isShowSearcHistorys: false,
      historySearchs: [],
      // 显示完整的搜索框样式
      isShowAllBox: false,
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      newsHistorys: [],
      // 学习记录弹窗内容类型 1：课程：2：文章
      showStudyType: 1,
      activeIndex: 1,
      historyType: [
        {
          type: 1,
          label: '资讯'
        },
        {
          type: 2,
          label: '课程'
        }
      ],
      showSearchDialog: false //新版搜索弹窗
    }
  },
  // 计算属性
  computed: {
    renderList() {
      let arr = this.decodeString(this.$store.state.navList) || []
      // let arr = this.$store.state.navList
      // if (!Array.isArray(arr)) {
      //   return []
      // }
      if (this.isProfessionHome) {
        return this.handleJumpData(arr.slice(0, 7))
      }
      return this.handleJumpData(arr.slice(0, 8))
    },
    isLogin() {
      return this.$store.state.user.isLogin
    },
    userData() {
      return this.$store.state.user.userData
    },
    lastStudys() {
      let buy = this.$store.state.lastStudys.buy || []
      return this.hanldeStudyData(buy)
    },
    // 搜索词列表
    keyWordList() {
      return this.decodeString(this.$store.state.search.keyWords) || {}
      // return this.$store.state.search.keyWords || {}
    },
    hot_search() {
      let arr =
        this.keyWordList && this.keyWordList.hot_search
          ? this.keyWordList.hot_search
          : []
      return arr.slice(0, 7)
    },
    profession_name() {
      return this.$route.meta.profession_name
    },
    // 顶部广告
    bannerInfo() {
      return this.decodeString(this.$store.state.activity_banner) || {}
    }
  },
  // 方法
  methods: {
    goHome() {
      if (typeof window !== 'undefined') {
        return window.location.host
      }
      return '/'
    },
    // 切换记录类型
    handleHistory() {},
    // 切换TAB
    changeIndex(item, index) {
      // 专业首页
      if (this.profession_name) {
        this.zlaBtn = {
          key_name: '顶部导航_' + item.menu_name,
          key_content: this.profession_name
        }
      } else {
        // 首页
        this.zlaBtn = {
          key_name: item.menu_name,
          key_content: item.menu_name
        }
      }
      if (+item.jump_type === 5 && (!item.child || !item.child.length)) {
        //当时跳转客服类型并且没有二级导航时
        this.gotoKefu(item)
        return
      } else if (+item.jump_type !== 5 && (!item.child || !item.child.length)) {
        this.advertisementJump(item)
      }
    },
    // 二级导航跳转客服
    gotoKefu(item, pItem) {
      if (pItem) {
        this.zlaBtn = {
          key_name: '顶部导航_' + pItem.menu_name,
          key_content: `${
            this.profession_name ? this.profession_name + '_' : ''
          }${item.menu_name}`
        }
      }
      if (+item.jump_type === 5 && (!item.child || !item.child.length)) {
        //当时跳转客服类型并且没有二级导航时
        this.show53Kefu()
      }
    },
    // 控制是否显示完全搜索框
    hanldeSearchAllBox() {
      if (this.keyword || this.isShowSearcHistorys) {
        this.isShowAllBox = true
      } else {
        this.isShowAllBox = false
      }
    },
    inputSearch(val) {
      this.keyword = val
      this.showSearchDialog = false
      this.goToSearch()
    },
    goToSearch() {
      let keyword = this.keyword.trim()
      if (!keyword) return
      this.zlaSearchWord({
        word: keyword,
        is_login: this.isLogin ? 1 : 0,
        attach: {
          word_type: '综合',
          from_page: document.referrer,
          platform: 'pc_web'
        }
      })
      let params = {
        keyword
      }
      this.keyword = ''
      this.goTo('/search/', {
        query: params,
        target: '_blank'
      })
    },
    // 隐藏专业切换、历史搜索弹窗、判断是否收起搜索框
    hideProfessionSelect() {
      window.addEventListener('click', e => {
        this.isShowSearcHistorys = false
        if (!this.keyword) {
          this.isShowAllBox = false
        }
        // if (!this.isShowProfessionSelect) return
        // this.isShowProfessionSelect = false
      })
    },
    // 展示学习记录
    showStudy() {
      // 跳转登录页
      if (location.href.includes('login.html')) return
      this.isShowCourse = false
      if (!this.isLogin) {
        sessionStorage.setItem('lastUrl', location.href)
        this.goTo('/login.html')
      } else {
        this.isShowStudy = !this.isShowStudy
        this.zlaBtn = {
          key_name: '学习记录',
          key_content: this.profession_name ? this.profession_name : '学习记录'
        }
      }
    },
    // 登录领课
    goToLogin() {
      // 跳转登录页
      this.zlaBtn = {
        key_name: '登录领课',
        key_content: this.profession_name ? this.profession_name : '登录领课'
      }
      sessionStorage.setItem('lastUrl', location.href)
    },
    // 监听页面点击事件,隐藏学习记录、我的弹窗
    handleBodyClick() {
      window.addEventListener('click', () => {
        this.isShowStudy = false
        this.isShowCourse = false
        this.isShowSearcHistorys = false
      })
    },
    // 处理学习记录数据
    hanldeStudyData(list) {
      return list.map(item => {
        let { industry_id } = item
        let profession_id = item.profession_id
        let profession_name = item.profession_name
        if (+industry_id === 7) {
          profession_id = industry_id + '_0'
          profession_name = '会计实操'
        }
        if (+industry_id === 17) {
          profession_id = industry_id + '_0'
          profession_name = '统招专升本'
        }
        item.url = `/personal/index.html?/profession_id=${profession_id}&profession_name=${profession_name}`
        return item
      })
    },
    // 退出登录
    loginOut() {
      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'custom-confirm-box'
      })
        .then(async () => {
          await this.$store.dispatch('user/loginOut')
          this.$message({ type: 'success', message: '退出成功' })
          location.reload()
        })
        .catch(() => {})
      // try {
      //   let flag = await this.$confirm(`是否退出登录?`, '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   })

      // } catch (err) {}
    },
    // 监听页面滚动，控制导航栏样式
    handlePageScroll() {
      window.addEventListener('scroll', e => {
        let documentEle = document.documentElement
        if (documentEle.scrollTop > 0) {
          this.headStyleType = 1
        } else {
          this.headStyleType = 2
        }
      })
    },
    // 跳转到专业首页
    gotoProfessionPage(item) {
      this.zlaBtn = {
        key_name: '专业切换',
        key_content: item.name
      }
    },
    // 删除历史搜索记录
    deleteHistorys() {
      this.zlaBtn = {
        key_name: '清除全部记录',
        key_content: '清除全部记录'
      }
      storage.remove('historySearchs')
      this.historySearchs = []
    },
    // a标签点击事件埋点
    handleZla(name, content) {
      this.zlaBtn = {
        key_name: name,
        key_content: content
      }
      if (content === '投诉建议') {
        this.$bus.$emit('showTsDialog')
      }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    hoverHandle(item) {
      item.img = item.hoverImg || item.img
    },
    // 新版搜索弹窗
    openSearchDialog() {
      this.showSearchDialog = !this.showSearchDialog
    },
    // 关闭搜索弹窗
    closeSearchDialog() {
      this.showSearchDialog = false
    }
  },
  mounted() {
    this.currentHref = location.href
    this.storage.init()
    this.historySearchs = storage.get('historySearchs')
      ? JSON.parse(storage.get('historySearchs')).slice(0, 5)
      : []

    this.newsHistorys = storage.get('user_news_historys')
      ? JSON.parse(storage.get('user_news_historys'))
      : []
    this.hideProfessionSelect()
    this.handleBodyClick()
    if (this.bannerInfo && this.bannerInfo.top_banner) {
      //如果又顶部广告，默认透明
      //默认透明
      this.headStyleType = 2
      this.handlePageScroll()
    }
    this.$store.dispatch('search/getSearchKeyWords', {})
    window.addEventListener(
      'scroll',
      () => {
        this.closeSearchDialog()
      },
      true
    )
    let alink = document.getElementsByTagName('a')
    for (let i = 0; i < alink.length; i++) {
      alink[i].addEventListener('click', () => {
        this.showSearchDialog = false
      })
    }
  },
  watch: {
    isLogin: {
      handler(val) {
        if (val) {
          this.$store.dispatch('getLastStudys')
        }
      },
      immediate: true
    },
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>
<!--当前页面的样式 -->
<!-- 当前头部样式类型-->
<style scoped>
a {
  text-decoration: none;
}
/* 自定义样式 */
.nav-item {
  position: relative;
  margin-right: 25px;
  font-size: 16px;
}
.nav-item-new {
  display: block;
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 3.44% 7.375%;
  position: absolute;
  top: -12px;
  right: -11px;
  width: 25px;
  height: 15px;
}
.nav-item-hot {
  display: block;
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 9.748% 7.375%;
  position: absolute;
  top: -12px;
  right: -11px;
  width: 25px;
  height: 15px;
}

/* end */
/* 默认样式 */
.current-title {
  font-size: 16px;
  font-weight: normal;
}
.default-class .current-title {
  /* css-ignore */
  color: #383838;
}
.default-class {
  /* css-ignore */
  background-color: #fff;
}
.default-class .nav-item-a {
  /* css-ignore */
  color: #666666;
}
.default-class .nav-item-a:hover {
  /* css-ignore */
  color: #383838;
  /* font-size: 18px; */
  /* font-weight: bold; */
}
.default-class .nav-item-a-active {
  /* css-ignore */
  color: #383838;
  /* font-size: 18px; */
  /* font-weight: bold; */
}
.default-class .nav-item-a-active::after {
  /* css-ignore */
  background: #3480ff;
}
.default-class .search-input {
  /* css-ignore */
  background: #f7f7f7;
  color: #383838;
}
.default-class .search-input::-webkit-input-placeholder {
  /* css-ignore */
  color: #999999;
}
.default-class .search-icon {
  /* css-ignore */
  color: #999999;
}
.search-icon:hover {
  color: #666666;
}
.default-class .nav-dropdown {
  /* css-ignore */
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(205, 205, 205, 0.5);
}
.default-class .nav-dropdown-item {
  /* css-ignore */
  color: #666666 !important;
}
/* .default-class .nav-dropdown-item:hover {
  background-color: #f4f8ff;
  color: #3480ff;
} */
.default-class .nav-item-a-active .nav-dropdown-item {
  /* css-ignore */
  color: #3480ff;
}
.default-class .nav-triangle {
  /* css-ignore */
  border-top-color: #383838;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.default-class .header-right .head-study-btn {
  /* css-ignore */
  color: #666666;
}
.default-class .header-right .head-study-btn-login {
  /* css-ignore */
  color: #666666;
}
.default-class .header-right .head-study-btn:hover,
.default-class .header-right .head-study-btn-login:hover {
  /* css-ignore */
  color: #383838;
}
.default-class .get-course-btn {
  /* css-ignore */
  background: #ffffff;
  color: #666666;
  border-radius: 16px;
  border: 1px solid #666666;
}
.get-course-btn:hover {
  color: #383838;
  border: 1px solid #383838;
}
.default-class .vertical-split-line {
  /* css-ignore */
  background: #999999;
}
</style>
<style scoped>
.header-box {
  position: fixed;
  z-index: 1111;
  width: 100%;
  height: 74px;
  transition: all 0.3s;
}

.header-box-inner {
  position: relative;
  width: 1200px;
  height: 100%;
}
.web-logo {
  display: block;
  width: 116px;
  height: 34px;
}
.black {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 3.841% 2.681%;
}
.white {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 56.466% 2.681%;
}
.header-navs {
  margin-left: 52px;
}

.nav-item-a {
  padding-bottom: 5px;
  text-decoration: none;
  cursor: pointer;
}
.nav-item-a-active {
  position: relative;
  font-weight: bold;
}
.nav-item-a-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 20px;
  height: 2px;

  border-radius: 1px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.search-input {
  width: 36px;
  height: 36px;
  border: none;
  outline: 0;
  padding: 0;
  border-radius: 18px;
  transition: width 0.3s ease;
}
.search-box-all .search-input {
  padding: 0 30px 0 14px;
}
.search-input::-webkit-input-placeholder {
  font-size: 14px;
}
.search-icon {
  position: absolute;
  top: 0;
  right: 0px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vertical-split-line {
  width: 1px;
  height: 20px;
  margin: 0 15px;
}
.get-course-btn {
  text-decoration: none;
  text-align: center;
  width: 78px;
  line-height: 30px;
  border-radius: 16px;
  cursor: pointer;
}
.header-right {
  -webkit-transform: translateY(-50%);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nav-item-a:hover .nav-dropdown {
  display: inline-block;
}

.nav-dropdown {
  font-size: 0;
  display: none;
  z-index: 101;
  position: absolute;
  left: 50%;
  top: 24px;
  width: 130px;
  padding: 10px 0;
  border-radius: 10px;
  transform: translateX(-50%);
}
.nav-dropdown-item {
  width: 100%;
  display: inline-block;
  text-decoration: none;
  padding: 8px 10px;
  text-align: center;
}
.nav-dropdown-item:hover {
  background-color: #f7f7f7;
  color: #383838 !important;
}
.nav-item-a-active .nav-dropdown-item {
  font-weight: normal;
}
.nav-triangle {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 0px;
  height: 0px;
  margin-left: 2px;
  border: 4px solid #000;
}
/* 专业切换 */
.profession-select-box {
  cursor: pointer;
  margin-left: 12px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 22px;
}
.profession-select-wrap {
  display: none;
  z-index: 10;
  position: absolute;
  top: 5px;
  left: -5px;
  padding-top: 16px;
}
.profession-select {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(205, 205, 205, 0.5);
  padding: 10px 0;
}

.profession-select-box:hover .profession-select-wrap {
  display: inline-block;
}

.select-item {
  padding: 8px 26px 8px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
}
.select-item:hover {
  background-color: #f7f7f7;
  color: #383838;
}
.select-item a {
  text-decoration: none;
  color: inherit;
}
.select-item-active {
  color: #3480ff;
  background: #f4f8ff;
}
.select-icon {
  margin-left: 3px;
  width: 20px;
  height: 20px;
}
/* 学习记录弹窗 */
.study-dialog {
  position: absolute;
  top: 60px;
  right: 0;
  padding: 20px 0 8px 0;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(205, 205, 205, 0.5);
  border-radius: 12px;
}
.study-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #383838;
  line-height: 25px;
}
.study-content {
  padding: 0 20px;
  max-height: 330px;
  overflow: auto;
  margin-top: 20px;
}
.study-item {
  cursor: pointer;
  margin-top: 20px;
  width: 272px;
}
.study-item:first-of-type {
  margin-top: 0;
}
.item-title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #383838;
  line-height: 18px;
}
.item-time {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #9ea7b1;
  line-height: 17px;
}
.study-right {
  display: block;
}
.study-right img {
  margin-left: 48px;
  width: 88px;
  height: 58px;
  border-radius: 8px;
}
.study-btn {
  text-decoration: none;
  display: block;
  text-align: center;
  cursor: pointer;
  margin-top: 30px;
  background: #f4f6ff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 36px;
}
.header-right .head-study-btn {
  /* color: inherit; */
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
/* 头像弹窗 */
.my-course-dialog {
  position: absolute;
  top: 60px;
  right: 0;
  border-radius: 12px;
  width: 288px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(205, 205, 205, 0.5);
}
.my-course-top {
  padding: 16px 20px;
  background: url('//image.zlketang.com/public/news/images/new_official/home/my-course-top-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.my-nickname {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #383838;
  line-height: 25px;
  max-width: 120px;
}
.my-slogin {
  margin-top: 6px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}
.logout-btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.my-course-bottom {
  padding-bottom: 15px;
}
.fun-item {
  margin: 20px 20px 0;
  text-decoration: none;
  color: #666666;
}
.fun-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.fun-title {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.my-header {
  margin-left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.search-box {
  position: relative;
  margin-right: 15px;
}
.recommend-search-box {
  border-radius: 12px;
  width: 200px;
  padding: 20px 0;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(221, 228, 241, 0.5);
  position: absolute;
  top: 46px;
  left: 0;
}
.history-title {
  margin: 0 10px;
}
.title-font {
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 22px;
}
.title-opr {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.history-search-ul {
  margin-top: 12px;
}
.history-search-ul li {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  padding: 0 10px;
}
.history-search-ul li:hover {
  color: #383838;
  background: #f7f7f7;
}
.hot-box {
  /* margin-top: 20px; */
}
.hot-title {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 22px;
}
.hot-ul {
  margin-top: 12px;
}
.hot-ul li {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  padding: 0 10px;
}
.hot-ul li:hover {
  color: #383838;
  background: #f7f7f7;
}
/deep/ .study-slide-nav {
  width: 136px;
  height: 40px;
  line-height: 40px !important;
  border-radius: 8px;
  font-size: 16px !important;
  font-weight: 400;
  text-align: center;
  padding: 0 !important;
}
.no-history-tip {
  padding: 10px 0 22px;
  color: #999999;
  text-align: center;
  line-height: 22px;
}
.study-left {
  display: block;
  height: 36px;
}
.search-box-dialog {
  position: fixed;
  width: 100vw;
  background: rgba(0, 0, 0, 0.4);
  height: 100vh;
  z-index: 200;
}
.fade-enter-active {
  transition: opacity 0.4s ease-in-out;
}
.fade-leave-active {
  transition: opacity 0.4s ease-in-out;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
.icon-search {
  width: 16px;
  height: 16px;
}
</style>
